<template>
  <div class="app-container">
    <div class="main-header">
      <span>欢迎您，{{user.userName}}（{{user.userID}}）。今天是{{todayStr}}。</span>
      <el-button @click="logout">
        退出登录
      </el-button>
    </div>
    <div class="split-line"></div>
    <div v-loading='pageLoading' class="main-content">
      <el-tabs class="left-tab" tab-position="left">
        <template v-for="(o, t) in showData">
          <el-tab-pane :key="t"
            v-if="o.children && o.children.length > 0 && o.children.some(i => i.resource_type === 'WIN')"
            :label="o.title">
            <div class="card mt-30">
              <template v-for="(oo, tt) in o.children">
                <div class="cardItem mb-30" :key='tt' @click="handleApp(oo)" v-if="oo.resource_type === 'WIN'">
                  <i class="fa t-36" :class="oo.icon"></i>
                  <div class="mt-16 cardName">{{ oo.title}}</div>
                </div>
              </template>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { generateTree, expendsTree, dateTools } from '@/utils'
import _ from 'lodash'
import dayjs from 'dayjs'

const today = dayjs().format('YYYY年M月D日') + '，星期' + ['日', '一', '二', '三', '四', '五', '六'][dayjs().day()]

export default {
  name: 'homeClient',
  components: {},
  data() {
    return {
      todayStr: today,
      showData: [],
      api: this.$api.menu,
      pageLoading: false,
      activeName: [],
      colorClass: ['text-blue', 'text-green', 'text-yellow', 'text-red', 'text-purple'],
    }
  },
  created() {
    this.refreshTree()
  },
  computed: {
    ...mapGetters(['user']),
  },
  methods: {
    randomIcon() {
      return 'fa-clone ' + this.colorClass[_.random(0, 4)]
    },
    handleApp(item) {
      if (item.target) this.$router.push(item.target)
    },
    logout() {
      this.$confirm('退出当前用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.reload() // In order to re-instantiate the vue-router object to avoid bugs
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    refreshTree() {
      let r = _.cloneDeep(this.user.menu.filter((x) => x.resource_type != 'WEB'))
      r.forEach((x) => (x.icon = x.icon || this.randomIcon()))
      this.showData = generateTree(r, 'id', 'parent', '0')
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/styles/client.scss';
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  max-width: 1024px;
  height: 72px;
  margin: auto;
  padding: 20px 0;
  overflow: hidden;
}
.split-line {
  border-bottom: 2px solid #ffffff;
}
.main-content {
  display: flex;
  flex-direction: column;
  max-width: 1024px;
  margin: 0 auto;
}
.left-tab {
  height: calc(100vh - 74px);
}
.card {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
  .cardItem {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 20%;
    align-items: center;
    text-align: center;
    .cardImg {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      margin: 0 auto;
    }
    .cardName {
      word-break: break-all;
    }
  }
}
</style>


